<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
  export default {
    name: "VBarChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts;
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          grid: {
            top: cfg['top'] || 15,
            left: cfg['left'],
            right: cfg['right'],
            bottom: cfg['bottom'] || 0,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (p) {
              return p[0].name + '：' + p[0].value
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: cfg['axisColor'] || '#999',
              fontWeight: isSmallScreen ? 100 : cfg['fontWeight'] || 600,
              fontSize: isSmallScreen ? 10 : cfg['axisLabelFontSize'] || 12,
              rotate: cfg['rotate'] || 20,

            },
            data: data && data.name || [],
          },
          yAxis: {
            type: 'value',
            barWidth: cfg['barWidth'] || 15,
            axisLabel: {
              color: '#666',
              fontSize: isSmallScreen ? 10 : 12,
            },

            axisLine: {
              show: true,
              lineStyle: {
                opacity: .5
              }

            },
            minInterval: cfg['minInterval'] || 20,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: cfg['splitLineColor'] || '#333',
                width: 0.5
              }
            },
          },
          series: [
            {
              data: data && data.value || [],
              type: 'bar',
              barWidth: cfg['barWidth'] || 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  {offset: 1, color: 'rgba(12,222,201,1)'},
                  {offset: 0, color: 'rgb(1,107,171,.8)'}
                ]),
              },
              label: {
                show: true,
                position: 'top',
                distance: 2,
                color: "#999",
                fontSize: isSmallScreen ? 10 : 12,
              }
            }

          ]
        };

        this.chart = echarts.getInstanceByDom(this.$refs.dom);
        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }
        this.chart.setOption(option, true);
        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>

</style>
